<script lang="js" setup name="ToolbarButton">
import { ref, computed, reactive } from "vue";
import XMenu from "./XMenu/XMenu.vue";

const props = defineProps({
	btnInfo: {
		type: Object,
		required: true,
	},
});

const emit = defineEmits(["action", "showMenu", "hideMenu"]);
// const pressed = ref(false);
const mouseState = ref(0);
const btnOnly = ref(null);
const btnHasMenu = ref(null);
const xMenu = ref(null);

const btn = reactive({...props.btnInfo, pressed: false});

const hasMenu = computed(() => {
	return btn.menu && btn.menu.length > 0;
});

const mouseStateStyle = computed(() => {
	let className;
	switch (mouseState.value) {
		case 0:
			break;
		case 1:
			className = "mousestate-l";
			break;
		case 2:
			className = "mousestate-r";
			break;
		case 3:
			className = "mousestate-lr";
			break;
		case 4:
			className = "mousestate-m";
			break;
		case 5:
			className = "mousestate-lm";
			break;
		case 6:
			className = "mousestate-mr";
			break;
		case 7:
			className = "mousestate-lmr";
			break;
	}

	return className;
});

const setMouse = (val) => {
	mouseState.value = val;
};

const getMouse = () => {
	return mouseState.value;
};

const updateMouse = (addVal, delVal) => {
	if (addVal) {
		mouseState.value |= addVal;
	}

	if (delVal) {
		mouseState.value &= ~delVal;
	}
}

const onButtonClick = (e) => {
	// if (props.btnInfo.holdPress) {
	// 	pressed.value = !pressed.value;
	// }

	if (btn.holdPress) {
		// pressed.value = !pressed.value;
		btn.pressed = !btn.pressed;
	}

	const rect = btnOnly.value.getBoundingClientRect();
	emit("action", btn, e, rect);
};

const onMenuClick = (menu) => {
	if (menu.changebtn) {
		btn.id = menu.id;
		btn.icon = menu.icon;
		btn.btnText = menu.text;
		menu.pressed = btn.pressed;
		// console.log('onMenuClick:', menu, props.btnInfo);
	}

	emit("action", menu);
};

const onExpandMenu = (e) => {
	e.stopPropagation();
	// console.log('menu drop:', btnMenu.value);
	const rect = btnHasMenu.value.getBoundingClientRect();
	// console.log('rect:', rect);

	// xMenu.value.show(true, props.btnInfo.menu, {left: rect.left, top: rect.bottom, top2: rect.top});
	xMenu.value.show(btn.menu, {left: rect.left, top: rect.bottom, top2: rect.top});
};

const onLeaveBtn = (e) => {
	const rect = xMenu.value.getRect();
	const x = e.clientX;
	const y = e.clientY;
	if (x < rect.left-1 || x > rect.right+1 || y < rect.top-1 || y > rect.bottom+1) {
		// console.log('hide menu', x, y, rect);
		xMenu.value.hide();
	}

};

const onLeaveMenu = (e) => {
	const rect = btnHasMenu.value.getBoundingClientRect();
	const x = e.clientX;
	const y = e.clientY;
	if (x < rect.left-1 || x > rect.right+1 || y < rect.top-1 || y > rect.bottom+1) {
		// console.log('hide menu', x, y, rect);
		xMenu.value.hide();
	}
};

const getBtnInfo = () => {
	// return props.btnInfo;
	return btn;
};
defineExpose({
	getBtnInfo,
	setMouse,
	getMouse,
	updateMouse,
});
</script>

<template>
	<div class="container">
		<XMenu ref="xMenu" @menuclick="onMenuClick" @mouseleave="onLeaveMenu" />
		<div
			v-if="hasMenu"
			ref="btnHasMenu"
			:class="['tbbutton-drop', btn.pressed ? 'tbbutton-press' : '']"
			:id="btn.id"
			@keydown.prevent
			@mouseleave="onLeaveBtn"
		>
			<div class="tbbutton-indrop" @mousedown.stop="onButtonClick">
				<svg-icon class="tbicon-fill" :icon="btn.icon"></svg-icon>
				<div class="tbtext">{{ btn.btnText }}</div>
				<div
					v-if="mouseState > 0"
					class="mouseicon-drop"
					:class="mouseStateStyle"
				></div>
			</div>
			<div class="icondrop" @click="onExpandMenu">
				<svg-icon
					v-if="hasMenu"
					class="tbicon-fill"
					icon="icon-drop"
					size="20px"
				/>
			</div>
		</div>
		<div
			v-else
			ref="btnOnly"
			:class="['tbbutton', btn.pressed ? 'tbbutton-press' : '']"
			:id="btn.id"
			@keydown.prevent
			@mousedown.stop="onButtonClick"
		>
			<svg-icon class="tbicon-fill" :icon="btn.icon"></svg-icon>
			<div class="tbtext">{{ btn.btnText }}</div>
			<div v-if="mouseState > 0" class="mouseicon" :class="mouseStateStyle"></div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.tbbutton {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 6.4rem;
	height: 6rem;
}

.tbbutton-drop {
	position: relative;
	display: flex;
	align-items: center;
	width: 8.4rem;
	height: 6rem;
}

.tbbutton-press {
	// background-color: #f0f0f0;
	background-color: var(--color-tbbtn-pressed);
	border: 1px solid #ccc;
	border-radius: 4px;
}

.tbbutton-indrop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 6.4rem;
	height: 100%;
}

.tbbutton:hover,
.tbbutton-drop:hover {
	background-color: var(--color-tbbtn-hover);
	border-radius: 5px;
}

.tbbutton:active,
.tbbutton-drop:active {
	background-color: var(--color-tbbtn-active);
}

:deep(.tbicon-fill) {
	fill: var(--color-theme-text);
	// fill: blue;
}

.tbtext {
	font-size: 1.3rem;
}

span {
	-moz-user-select: none;
	user-select: none;
}

.icondrop {
	height: 100%;
	width: 2rem;
	fill: var(--color-theme-text);
}

// .icondrop {
// 	position: absolute;
// 	right: 0;
// 	top: 0;
// 	height: 2rem;
// 	width: 2rem;
// 	fill: var(--color-theme-text);
// }

.icondrop:hover {
	border-left: 1px solid #aaa;
	border-right: 1px solid var(--color-tbbtn-hover);
	border-radius: 0px 5px 5px 0px;
	// background-color: var(--color-tbbtn-hover);
}

.mouseicon {
	position: absolute;
	width: 11px;
	height: 16px;
	left: 14px;
	top: 24px;
}

.mouseicon-drop {
	position: absolute;
	width: 11px;
	height: 16px;
	left: 14px;
	top: 24px;
}

.mousestate-l {
	background: url(../assets/images/mouse_l.png) no-repeat center center;
}

.mousestate-lm {
	background: url(../assets/images/mouse_lm.png) no-repeat center center;
}

.mousestate-lmr {
	background: url(../assets/images/mouse_lmr.png) no-repeat center center;
}

.mousestate-lr {
	background: url(../assets/images/mouse_lr.png) no-repeat center center;
}

.mousestate-m {
	background: url(../assets/images/mouse_m.png) no-repeat center center;
}

.mousestate-mr {
	background: url(../assets/images/mouse_mr.png) no-repeat center center;
}

.mousestate-r {
	background: url(../assets/images/mouse_r.png) no-repeat center center;
}
</style>
